{% extends "base.html" %}
{% block title %}{{ sh0t.title }} - Sh0t | Sh00t{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/simplemde.min.css">
{% endblock %}
{% block page %}
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
    <li class="breadcrumb-item"> <i class="fa fa-file-text"></i> <a href="/app/sh0ts/all/">All Sh0ts</a></li>
    <li class="breadcrumb-item active"> {{ sh0ts.title }} <span id="response" class="small"></span></li>
</ol>
<div class="row">
    <div class="col-lg-6">
        <form role="form" method="post">
            {% if "success" == submitted %}
                <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-info alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <i class="fa fa-info-circle"></i> Updated
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="form-group">
                <label>Title</label>
                <input class="form-control" name="title" id="title" value="{{ sh0t.title }}" autocomplete="off" />
            </div>
            <div class="form-group">
                <label>Severity</label>
                <select class="form-control" name="severity" id="severity">
                        {% for sev in severities %}
                            <option value={{sev}}> P{{sev}} </option>
                        {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Note</label>
                <textarea class="form-control" rows="15" id="body" name="body">{{ sh0t.body }}</textarea>
            </div>
            <div class="form-group">
                <label for="assessment">Assessment</label>
                <select class="form-control" name="assessment" id="assessment">
                {% for assessment in assessments %}
                    <option value="{{ assessment.id }}"
                    {% if assessment.id == sh0t.assessment.id %}
                        selected="selected"
                    {% endif %}>
                    {{ assessment.name }}</option>
                {% endfor %}
                </select>
            </div>
            <input type="hidden" value="{{ sh0t.id }}" id="id" />
            <button type="submit" class="btn btn-primary">Update</button>
            <button type="submit" name="delete" value="delete" class="btn btn-danger">Delete</button>
            {% csrf_token %}
        </form>
    </div>
</div>
{% endblock %}
{% block extra_foot %}
<script src="/static/js/common-ajax.js"></script>
<script type="text/javascript">

    /* Select the current severity */$
    $('#severity option[value={{sh0t.severity}}]').attr('selected','selected');

    /* sync() defined in common-ajax ^ above */
    $('#body').on('input', function() {
        sync('sh0t');
    });
    $('#title').on('input', function() {
        sync('sh0t');
    });
    $('#severity').on('change', function() {
        sync('sh0t');
    });
    $('#assessment').on('change', function() {
        sync('sh0t');
    });
</script>
<script src="/static/js/simplemde.min.js"></script>
<script>
    var simplemde = new SimpleMDE({
        element: document.getElementById("body"),
        autosave: {
            enabled: true,
            uniqueId: "Sh00tSh0tSingleBody{{ sh0t.id }}",
            delay: 1000,
        },
    });
</script>
{% endblock %}